<template>
  <div class="w-h-full flex-center uni-shadow">
    <div class="main-box w-h-full secondly-color overflow-hidden">
      <div
        class="first-box flex-center"
        :tag="tagState ? 'true' : 'false'"
      >
        <div
          class="content-box display-column"
          :isShow="tagA ? 'true' : 'false'"
        >
          <div class="title-box">Welcome！</div>
          <div class="input-block">
            <label class="input-label">Username</label>
            <input
              v-model="requestBody.username"
              placeholder="Username"
            />
          </div>
          <div class="input-block">
            <label class="input-label">Password</label>
            <input
              v-model="requestBody.password"
              placeholder="Password"
              type="password"
            />
          </div>
          <div class="button-box">
            <ElButton
              style="flex: 1"
              @click="onClickLogin"
              >Login</ElButton
            >
          </div>
          <div class="register-tip">
            <div>Don't have an account?</div>
            <div
              class="jumpToRegsiter"
              @click="OnClickChange"
            >
              Sign up now
            </div>
          </div>
        </div>

        <!-- Register -->
        <div
          class="content-box display-column"
          :isShow="tagB ? 'true' : 'false'"
        >
          <div class="title-box">Register...</div>
          <!-- <div class="content-box display-column">Fanny pack hexagon food truck, street art waistcoat kitsch.</div> -->
          <div class="input-block">
            <label class="input-label">Username</label>
            <input
              v-model="requestBody.username"
              placeholder="Username"
            />
          </div>
          <div class="input-block">
            <label class="input-label">Password</label>
            <input
              v-model="requestBody.password"
              placeholder="Password"
              type="password"
            />
          </div>
          <div class="input-block">
            <label
              for="password"
              class="input-label"
              >Confirm</label
            >
            <input
              v-model="confirm"
              placeholder="Confirm"
              type="password"
            />
          </div>
          <div class="button-box">
            <ElButton
              style="flex: 1"
              @click="onClickRegister"
              >Register</ElButton
            >
          </div>
          <div class="register-tip">
            <div>Already have an account!</div>
            <div
              class="jumpToRegsiter"
              @click="OnClickChange"
            >
              Sign in now
            </div>
          </div>
        </div>
      </div>

      <div
        class="second-box flex-col"
        :tag="tagState ? 'false' : 'true'"
      >
        <UniCosImage
          class="w-h-full"
          :src="API.COS_LOGIN_IMAGE_URL"
          :format="CosImgFormatSuffix.WEBP"
        ></UniCosImage>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { API } from "~/models/api";
import { CosImgFormatSuffix } from "~/models/cos";
import type { ResponseMsg, DataArrResponse } from "~/models/universal";

const tagA = ref(true);
const tagB = ref(false);
const tagC = ref(true);
const tagState = ref(false);
const token = useCookie("token", {
  maxAge: 60 * 60 * 24 * 7,
  sameSite: "lax",
});
defineProps(["imgUrl"]);
const OnClickChange = () => {
  createTaskSequence(200, [
    () => {
      if (tagA.value) tagA.value = false;
      if (tagB.value) tagB.value = false;
      tagC.value = !tagC.value;
      tagState.value = !tagState.value;
    },
    () => {
      if (tagC.value) tagA.value = true;
      else tagB.value = true;
    },
  ]);
};

const confirm = ref("");
const requestBody = ref({ username: "", password: "" });
const onClickRegister = async () => {
  if (requestBody.value.password == "" && requestBody.value.username == "") {
    createSimpleElNotification(false, "密码或者账号为空");
    return;
  }

  if (confirm.value != requestBody.value.password) {
    createSimpleElNotification(false, "两次密码不一致");
    return;
  }

  const response = await $fetch<ResponseMsg<object>>("/api/user/register", {
    method: "POST",
    body: requestBody.value,
  });
  createSimpleElNotification(!!response.status, response.msg);

  if (response.status) {
    OnClickChange();
  }
};

const onClickLogin = async () => {
  const response = await $fetch<ResponseMsg<string>>("/api/user/login", {
    method: "POST",
    body: requestBody.value,
  });
  createSimpleElNotification(!!response.status, response.msg);
  if (response.status) {
    console.log(response);

    token.value = response.data;
    console.log(token.value);

    navigateTo("/");
  }
};
</script>

<style lang="scss" scoped>
.main-box {
  display: flex;
  position: relative;
  border-radius: 10px;

  & > .first-box {
    width: 55%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 1s ease;

    &[tag="true"] {
      left: 45%;
    }

    &[tag="false"] {
      left: 0%;
    }

    & > .content-box {
      position: absolute;
      top: 0px;
      width: 100%;
      transition: all 0.5s ease;
      height: 100%;
      padding: 3rem;

      &[isShow="true"] {
        opacity: 1;
        z-index: 5;
      }

      &[isShow="false"] {
        opacity: 0;
        z-index: 4;
      }

      & > .title-box {
        font-size: 3rem;
        font-weight: bold;
        margin-bottom: 2rem;
      }

      & > .button-box {
        display: flex;

        & > .password-tip {
          font-size: 1rem;
          flex: 9;
          color: var(--color);
          font-style: italic;
          text-decoration: underline;
          text-decoration-color: var(--color);
        }
      }

      & > .register-tip {
        font-size: 1rem;
        position: absolute;
        bottom: 9px;
        display: flex;

        & > .jumpToRegsiter {
          text-decoration: underline;
          text-decoration-color: var(--color);

          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }

  & > .second-box {
    width: 45%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transition: all 1s ease-out;
    z-index: 6;

    &[tag="true"] {
      right: 0%;
    }

    &[tag="false"] {
      right: 55%;
    }
  }
}

.input-block {
  display: flex;
  flex-direction: column;
  padding: 0.2rem 1rem;
  border: 1px solid var(--color-50);
  border-radius: 4px;
  margin-bottom: 1rem;
  transition: 0.3s;
  font-size: 1.1rem;
  input {
    outline: 0;
    border: 0;
    font-family: "Nunito", sans-serif;
    background-color: var(--bg-secondary);

    &::placeholder {
      color: var(--color-20);
      font-size: 1rem;
    }
  }

  &:focus-within {
    border-color: var(--color);

    .input-label {
      color: var(--color-80);
    }
  }
}
</style>
